<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
  <h:head>
    <title>Album Di Foto</title>
  </h:head>
  <h:body>
    <!-- Header -->
    <h:form> 
      <div id="header">
         <div class="header-block" style="float: left; width: 980px ;margin: auto"  >
          <div id="logo" style="flot:left" align="left">
            <h2 class="logo">ALBUM DI FOTO</h2>
          </div>
          <div class="menu" style="flot:right" align="right">
            <h:outputLink id="loginLink" value="javascript:void(0)" onclick="dlg.show()" title="login">     
              <p:commandButton id="loginButton" value="Login"/>   
            </h:outputLink>  
          </div>
        </div>
      </div>
    </h:form>
    <!-- end content-->

    <h:outputLink id="loginLink" value="javascript:void(0)" onclick="dlg.show()" title="login">
    </h:outputLink>
    <p:growl id="growl" showDetail="true" life="3000" />
    <p:dialog id="dialog" header="Login" widgetVar="dlg">
      <h:form>

        <h:panelGrid columns="2" cellpadding="5">
          <h:outputLabel for="username" value="Username:" />
          <p:inputText id="username" required="true" label="username" />

          <h:outputLabel for="password" value="Password:" />
          <h:inputSecret id="password" required="true" label="password" />

          <f:facet name="footer">
            <p:commandButton id="loginButton" value="Login" update=":growl" 
                             oncomplete="handleLoginRequest(xhr, status, args)" action="login"/>
          </f:facet>
        </h:panelGrid>

      </h:form>
    </p:dialog>

    <script type="text/javascript">
      function handleLoginRequest(xhr, status, args) {
        if(args.validationFailed || !args.loggedIn) {
          jQuery('#dialog').effect("shake", { times:3 }, 100);
        } else {
          dlg.hide();
          jQuery('#loginLink').fadeOut();
        }
      }
    </script>



    <h:form>
      <label>
        <div class="Register" style="font-size: 21px; margin-left: 6em; margin-right: 6em" >        
          <br/>
          <div class="gallery" align="left" style="float: left ">
            <p:galleria value="#{ibean.images}" var="image" panelHeight="300" panelWidth="480">
              <p:graphicImage value="Images/#{image}" />
            </p:galleria>
          </div>
          <div class="regiter" style="float: right" align="center">
            <h:panelGrid columns="1" cellpadding="5">
              <p:inputText id="user" label="user" />
              <p:watermark for="user" value="User" />
              <p:inputText id="email" label="email" />
              <p:watermark for="email" value="email" />
              <p:inputText id="password" label="password" />
              <p:watermark for="password" value="password" />
              <p:commandButton value="Register"/> 
            </h:panelGrid>
          </div>
        </div>

      </label>

    </h:form>  

  </h:body>
</html>